<template>
<teleport to="#back">
  <div
    class="loading-container"
  >
  </div>
</teleport>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'

export default defineComponent({
  setup() {
    const node = document.createElement('div')
    node.id = 'back'
    document.body.appendChild(node)
    onUnmounted(() => {
      document.body.removeChild(node)
    })
  }
})
</script>

<style>
.loading-container {
  background-color:#fff ;
  background-image: url('~@/assets/rocket.gif');
  z-index: 100;
  position: fixed;
  top: 60px;
  left: 0;
  bottom:0;
  right:0;
  background-repeat: no-repeat;
  background-position: center;
}

</style>
